/* ----------
 * Icon
 */
    .file-icon {
        display: inline-block;
        vertical-align: middle;
        font-size: 1em;
        line-height: 1;
    }
/* ----------
* File Upload
*/
    .file-upload {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
    .file-upload *,
    .file-upload *:before,
    .file-upload *:after {
        box-sizing: border-box;
    }
    .file-upload a {
        color: inherit;
        text-decoration: none;
    }

/* ----------
* File Selector
*/
    .file-selector {
        outline: none;
    }
    .file-selector-card {
        width: 100px;
        height: 100px;
        border: 1px dashed #d9d9d9;
        border-radius: 2px;
        text-align: center;
        background: #fafafa;
    }
    .file-selector-card:before,
    .file-selector-card_inner {
        display: inline-block;
        vertical-align: middle;
    }
    .file-selector-card:before {
        content: '';
        width: 0;
        height: 100%;
    }
    .file-selector-card_inner {
        text-align: center;
    }
    .file-selector--draggable,
    .file-selector-drag {
        width: 100%;
    }
    .file-selector-drag {
        width: 100%;
        border: 1px dashed #d9d9d9;
        border-radius: 4px;
        background: #fafafa;
        font-size: 1.5em;
        text-align: center;
        padding: 40px 20px;
    }
    .file-selector-card:hover,
    .file-selector-drag:hover {
        border-color: #0099ff;
    }

/* ----------
* File List
*/
    .file-list {
        list-style: none;
        padding-left: 0;
        margin: 0;

        font-family: -apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
        font-size: 14px;
        color: rgba(0, 0, 0, .65);
    }

/* ----------
* File List Item
*/
    .file-list-item {
        margin-top: 5px;
        position: relative;
    }
    .file-list-item:hover {
        background: #fffbf0;
    }
    .file-list-item--error {
        background: rgba(255, 0, 0, .05);
        color: #f00;
    }

/* ----------
* File Thumb
*/
    .file-thumb {
        display: inline-block;
        width: 48px;
        height: 48px;
        overflow: hidden;
        position: relative;
    }
    .file-thumb_image-wrap {
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        text-align: center;
    }
    .file-thumb_image-wrap:before,
    .file-thumb_image {
        display: inline-block;
        vertical-align: middle;
    }
    .file-thumb_image-wrap:before {
        content: '';
        width: 0;
        height: 100%;
    }
    .file-thumb_image {
        max-width: 100%;
    }
    .file-thumb_state-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 10px;
    }
    .file-thumb_state-icon,
    .file-thumb_state-icon .icon {
        line-height: 0;
    }
    .file-thumb_state-icon {
        font-size: 2em;
    }

/* ----------
* File Name and Size
*/
    .file-name {
        display: block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        color: inherit;
        text-decoration: none;
    }
    .file-name_size {
        color: #999;
        font-style: italic;
        font-size: .8em;
    }

/* ----------
* File Uploading Speed
*/
    .file-speed {
        font-size: 12px;
        color: #999;
    }

/* ----------
* Progress
*/
    .file-progress {
        height: 2px;
        border-radius: 2px;
        overflow: hidden;
        background: #efefef;
    }
    .file-progress-bar {
        height: 100%;
        background: #09f;
    }

/* ----------
* File Button
*/
    .file-button {
        opacity: .75;
    }
    .file-actions .file-button {
        padding: 2px 3px;
    }

/* ----------
* Overlay
*/
    .file-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding-top: 100%;
        background: rgba(0, 0, 0, .6);
    }

/* ----------
* listType=text 文本列表模式
*/
    .file-list-item--text {
        padding: 0 65px 0 22px;
    }
    .file-thumb--text {
        position: absolute;
        top: 0;
        left: 0;
        width: 22px;
        height: 22px;
    }
    .file-thumb_state-icon--text {
        font-size: 1em;
        padding: 0;
    }
    .file-name--text {
        height: 22px;
        line-height: 22px;
    }
    .file-progress--text {
        position: absolute;
        bottom: 0;
        left: 22px;
        right: 0;
    }
    .file-actions--text {
        visibility: hidden;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }
    .file-list-item--text:hover .file-actions--text {
        visibility: visible;
    }

/* ----------
* listType=image 文本列表模式
*/
    .file-list-item--image {
        height: 50px;
        padding: 0 65px 0 55px;
        border: 1px solid rgba(0, 0, 0, .1);
    }
    .file-list-item--image.file-list-item--error {
        border-color: #f00;
    }
    .file-thumb--image {
        position: absolute;
        top: 0;
        left: 0;
        width: 48px;
        height: 48px;
    }
    .file-name--image {
        line-height: 48px;
    }
    .file-name--image.file-name--uploading,
    .file-name--image.file-name--paused {
        line-height: 36px;
    }
    .file-progress--image {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 55px;
    }
    .file-speed--image {
        position: absolute;
        left: 55px;
        right: 0;
        bottom: 3px;
    }
    .file-actions--image {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }
/* ----------
* listType=card 卡片列表模式
*/
    .file-list-item--card {
        width: 100px;
    }
    .file-list--card .file-selector,
    .file-list-item--card {
        float: left;
        margin: 8px;
    }
    .file-thumb--card {
        overflow: visible;
        width: 100%;
        height: auto;
        border: 1px solid #d9d9d9;
        border-radius: 2px;
    }
    .file-thumb--card:before {
        display: block;
        content: '';
        padding-top: 100%;
    }
    .file-thumb_image-wrap--card {
        overflow: hidden;
        width: auto;
        height: auto;
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
    }
    .file-progress--card {
        position: absolute;
        margin-top: 100%;
        top: 0;
        left: 0;
        right: 0;
        transform: translateY(-100%);
    }
    .file-speed--card {
        position: absolute;
        top: -2px;
        left: 0;
        right: 0;
        text-align: center;
        margin-top: 100%;
        transform: translateY(-100%);
        color: #fff;
    }
    .file-actions--card,
    .file-overlay--card {
        display: none;
    }
    .file-actions--card {
        width: 100%;
        text-align: center;
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
    }
    .file-overlay--card {
        border-radius: 2px;
    }
    .file-list-item--card:hover {
        background: none;
    }
    .file-list-item--card:hover .file-overlay--card,
    .file-list-item--card:hover .file-actions--card {
        display: block;
    }
    .file-list--card:before,
    .file-list--card:after {
        content: '';
        display: table;
    }
    .file-list--card:after {
        clear: both;
        line-height: 0;
    }
/* ----------
* Avatar
*/
    .file-selector-avatar {
        overflow: hidden;
        position: relative;
    }
    .file-selector-avatar img {
        max-width: 100%;
    }
    .file-selector-avatar--circle {
        border-radius: 100%;
    }
    .file-actions--avatar {
        visibility: hidden;
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, .5);
        text-align: center;
        color: #fff;
        padding: 50% 0;
    }
    .file-selector-avatar:hover .file-actions--avatar {
        visibility: visible;
    }
    .file-progress--avatar,
    .file-speed--avatar {
        position: absolute;
        left: 5px;
        right: 5px;
        top: 50%;
    }
    .file-progress--avatar {
        height: 4px;
        margin-top: 5px;
    }
    .file-speed--avatar {
        transform: translateY(-100%);
        text-align: center;
        color: #fff;
    }

/* ----------
* Animation: rorating
*/
.rotating {
    -webkit-animation-name: rotating;
    animation-name: rotating;
    -webkit-transform-origin: center;
    transform-origin: center;

    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes rotating {
    from {
    -webkit-transform: rotate(-30deg);
    }

    to {
        -webkit-transform: rotate(330deg);
    }
}
@keyframes rotating {
    from {
        transform: rotate(-30deg);
    }

    to {
        transform: rotate(330deg);
    }
}
